<template>
  <div class="banner" @click="handleBannerClick">
    <div class="banner-img-box">
      <img class="banner-img" :src="bannerImage" alt="" />
    </div>
    <div class="banner-info">
      <div class="banner-number">
        <span class="iconfont banner-album">&#xe7f1;</span>
        {{this.galleryImages.length}}
      </div>
      <div class="banner-title">{{sightName}}</div>
    </div>
    <common-fade>
      <common-gallery 
        @closeGallery="handleGalleryClose" 
        :imgsList="galleryImages" 
        v-if="isGalleryShow">
      </common-gallery>
    </common-fade>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery';
import CommonFade from 'common/fade/Fade';
export default {
  name: 'DetailBanner',
  props: {
    sightName: String,
    bannerImage: String,
    galleryImages: Array
  },
  components: {
    'common-gallery': CommonGallery,
    'common-fade': CommonFade
  },
  data: function() {
    return {
      // imgsList: ["http://img1.qunarzz.com/sight/p0/1712/16/16dd785ae3e2447ba3.img.jpg_r_800x800_dd060a69.jpg", "http://img1.qunarzz.com/sight/p0/1412/8c/00acc470780a5d986d8de5c0ceb5b701.water.jpg_r_800x800_7da3e204.jpg"],
      // imgsList: 11, //这种变成数组[,,,,,]11个元素
      // imgsList: '123', 这种变成['1', '2', '3'] 3个元素
      isGalleryShow: false
    }
  },
  methods: {
    handleBannerClick: function() {
      // 为什么点击会有问题? 因为刚刚开始这个相册里面默认是false,没有宽度
      // 然后我们点击了,把它显示出来了, 这样的话, 宽度的计算就会有问题
      // 导致了轮播图不会正常的滚动了
      // 需要添加一个动态的检查器 => 在Gallery里面的swiperOption添加配置项
      // observer,  observerParent
      this.isGalleryShow = true;
      document.documentElement.style.overflowY = 'hidden';
    },
    handleGalleryClose: function(e) {
      // 为什么写false不能关闭呢? , 点击事件会冒泡传到父级,因为<common-gallery>组件是.banner的子元素 
      // 所以.点击事件会冒泡到父级, 1.  所以需要取消冒泡, 2. 把<common-gallery>和.banner同级
      // 我这里用取消冒泡,  注意, 取消冒泡的话, gallery.vue需要把事件对象传过来
      // 其实用取消冒泡不好, 还是用同级的好, 因为相册是子集, 在相册内向下划, 父级也会向下的 
      // => 其实是父级盒子层级高, 子集的gallery的z-index设置一下就行了
      // 所以也可以用取消冒泡的
      // (没用better-scroll的情况下)
      e.stopPropagation();
      this.isGalleryShow = false;
      document.documentElement.style.overflowY = 'auto';
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner-wrapper {
    // width 100%;
    // height 100%;
    transform: rotate(45deg); 
    //transfrom会让postion相对于自己对位, 就算是posfixed也一样, 所以不要让有transfrom的元素变成需要设置fixed的父级, 至少是同级,
  }

  .banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 55%;
    background-color: #eee;

    .banner-img-box {
      // width: 100在reset.css里面有了, height: auto撑开(这需要原图片宽高比例的配合), 如果100%的话,那么会是0
      height: auto;
    }

    .banner-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      // width: 100%;//l0+r0就是w100p
      padding: 0 .2rem .1rem;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
      box-sizing: border-box;

      .banner-number,
      .banner-title {
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        color: #fff;
      }

      .banner-number {
        width: 1.2rem;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
      }

      .banner-title {
        font-size: .36rem;
      }
    }
  }
</style>